<!doctype html>
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="./ueditor-plus/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="./ueditor-plus/ueditor.all.js"></script>
    <script type="text/javascript" charset="utf-8" src="./ueditor-plus/lang/zh-cn/zh-cn.js"></script>
    <style>
        html, body{
            height: 100%;
            width: 100%;
            margin: 0;
        }
        #content{
            height: 100%;
            width: 100%;
        }
        #editor{
            float: left;
            height: 100%;
            width: 50%;
        }
        #opt{
            float: right;
            height: 100%;
            width: 50%;
        }
    </style>
</head>
<body>
<div id="content">
    <div id="opt">
        <button onclick="getContent()">生成word</button>
    </div>
    <div id="editor" type="text/plain" style="height: calc(100% - 200px);"/>
    <script src="./js/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        var ue;
        //实例化编辑器
        $(document).ready(function () {
            ue = UE.getEditor('editor');
        });

        function getContent() {
            $.ajax({
                url: "/generateWord",
                type: "POST",
                contentType: "application/json",
                data: UE.getEditor('editor').getContent(),
                success: function (data) {
                    if(confirm("word生成成功，是否进行下载？")){
                        const a = document.createElement('a');
                        a.setAttribute('href', data.url);
                        a.setAttribute('download', "下载文件");
                        a.click();
                    }
                }
            })
        }
    </script>
</div>
</body>
</html>
